﻿.mud-popover {
    width: 100%;
    outline: 0;
    z-index: calc(var(--mud-zindex-popover) + 1);
    display: none;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;

    &.mud-popover-open {
        display: block;
        animation: mud-animation-fadein 251ms;
    }

    &.mud-popover-top {
        bottom:0;
        &.mud-popover-offset-y {
            bottom: 100%;
            top:auto;
        }
    }

    &.mud-popover-bottom {
        top:0;
        &.mud-popover-offset-y {
            top: 100%;
            bottom:auto;
        }
    }

    &.mud-popover-left {
        left:0;
        &.mud-popover-offset-x {
            right: 100%;
            left:auto;
        }
    }

    &.mud-popover-right {
        right:0;
        &.mud-popover-offset-x {
            left: 100%;
            right:auto;
        }
        &.mud-popover-offset-y {
            top: 100%;
            bottom:auto;
        }
    }
}